<template>
  <el-row ref="radarWrap" class="rightWrap">
    <el-row type="flex" style="flex-direction: row;align-items: center">
      <div>
        <el-row class="onlineTitle">{{ $store.getters.getLocation }}质差用户数量</el-row>
        <el-row class="onlineNum">
          <countTo :startVal="0" :endVal="endVal" :decimals="0" :duration="2000"/>
          <span>个</span>
        </el-row>
      </div>
    </el-row>
    <el-row style="height: calc(14vh - 70px)">
      <el-progress :format="format" :text-inside="true" :stroke-width="26" :percentage="percentage" style="margin-top: 1vh" />
    </el-row>
  </el-row>
</template>

<script>
import countTo from 'vue-count-to'
import BarCharts from '@c/BarCharts'
  export default {
    name: "ThreeRightOneTOp",
    filters: {
      parseToTenThousand(val) {
        if (val > 10000) {
          return val / 10000
        } else {
          return val
        }
      }
    },
    components: {
      countTo,
      BarCharts
    },
    props: {
      endVal: {
        type: Number,
        default: 0
      },
      percentage: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        chartDataTop:{
          dataLine: [10,20,30,40,50,10,10,15,98,12,12,15],
          dataY: [1,2,3,4,5,6,7,8,9,10,11,12]
        },
        headerList: ['省份','纳管量','在线量','在线比','离线量'],
        dataList: [
          ['北京',100, 200, '98.7%', '23%'],
          ['北京',100, 200, '98.7%', '23%'],
          ['北京',100, 200, '98.7%', '23%']
        ],
        chartName: [],
        total: '',
        online: '',
        radarWidth: '',
        radarHeight: ''
      }
    },
    created() {
      this.$bus.$off('provinceChanged')
      this.$bus.$on('provinceChanged', this.getProbes)
    },
    mounted() {
    },
    methods: {
      format() {
        return ''
      },
      getProbes(code){
        window._api.apiProbes({ code }).then(res => {
          if (res.state === 'ok') {
            this.total = res.total
            this.online = res.online
            let keys = Object.keys(res.types)
            this.chartData = []
            this.chartName = []
            keys.map(item => {
              this.chartName.push(item)
              this.chartData.push(res.types[item])
            })
          } else {
            this.$message.warning('数据异常')
          }
        })
      }
    }
  }
</script>

<style scoped>
.rightWrap{
  height: 17vh;
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.66);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
.onlineTitle{
  height: 20px;
  line-height: 20px;
  text-align: left;
  /*padding: 0 18px;*/
  font-size: 16px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: rgb(243, 123, 29);
  /*background-image: linear-gradient(to bottom, rgba(14,101,187, 0.8) 0%, rgba(0,0,0,0) 35%,rgba(0, 0, 0, 0) 65%, rgba(14,101,187, 0.8) 100%);*/
}
.onlineNum{
  height: 50px;
  line-height: 50px;
  text-align: left;
  /*padding: 0 20px;*/
  font-size: 30px;
  color: rgb(66, 165, 233);
}
</style>
<style>
  .el-progress-bar__outer{
    background-color: rgb(16, 26, 117)
  }
</style>

